<!--
*
* Copyright 2015 HISP Tanzania
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
* @since 2015
* @author Joseph Chingalo profschingalo@gmail.com>
*
*
-->
<ion-header>

  <ion-navbar [color]="(colorSettings$ |async).colorAttributes.main">
    <ion-title>
      <span [translate]="'Sync'"></span>
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-grid>
    <div class="item-card" *ngFor="let syncContent of syncContents;trackBy: trackByFn">
      <ion-row (tap)="toggleSyncContents(syncContent)">
        <ion-col col-11>
          <img class="side-menu-icon" [src]="syncContent.icon" />&nbsp;&nbsp;
          <span ion-text [color]="(isSyncContentOpen[syncContent.id]) ?'current' : 'font-color'">
            <span [translate]="syncContent.name"></span>
          </span>
        </ion-col>
        <ion-col col-1 item>
          <div style="text-align: center;">
            <ion-icon [color]="(isSyncContentOpen[syncContent.id]) ?'current' : 'font-color'" *ngIf="!(isSyncContentOpen[syncContent.id])"
              name="ios-arrow-down" item-right></ion-icon>
            <ion-icon [color]="(isSyncContentOpen[syncContent.id]) ?'current' : 'font-color'" *ngIf="(isSyncContentOpen[syncContent.id])"
              name="ios-arrow-up" item-right></ion-icon>
          </div>
        </ion-col>
      </ion-row>
      <div *ngIf="(isSyncContentOpen[syncContent.id])">
        <hr>
        <div *ngIf="syncContent.id == 'dataViaSms'">
          <upload-data-via-sms [colorSettings]="colorSettings$ |async"></upload-data-via-sms>
        </div>

        <div *ngIf="syncContent.id == 'dataViaInternet'">
          <upload-data-via-internet [colorSettings]="colorSettings$ |async"></upload-data-via-internet>
        </div>

        <div *ngIf="syncContent.id == 'downloadMetadata'">
          <download-meta-data [colorSettings]="colorSettings$ |async"></download-meta-data>
        </div>

        <div *ngIf="syncContent.id == 'downloadData'">
          <download-data [colorSettings]="colorSettings$ |async"></download-data>
        </div>

        <div *ngIf="syncContent.id == 'clearData'">
          <clear-local-data [colorSettings]="colorSettings$ |async"></clear-local-data>
        </div>

        <div *ngIf="syncContent.id == 'clearMetadata'">
          <clear-local-metadata [colorSettings]="colorSettings$ |async"></clear-local-metadata>
        </div>

      </div>
    </div>
  </ion-grid>

</ion-content>
